<template>
  <div class="w-3/5 mx-auto py-4" id="div-1">
    <a-row class="!mx-0 mb-6" :gutter="20" id="a-row-2">
      <a-col :span="17" class="!pl-0" id="a-col-3">
        <a-flex :gap="20" id="a-flex-4">
          <a-typography-link href="#" class="flex flex-col w-2/3 relative" id="a-typography-link-5">
            <a-image src="https://picsum.photos/id/8/1000/800" :preview="false" class="aspect-[5/3]" id="a-image-6" />
            <a-typography-paragraph
              class="!mb-0 absolute bottom-0 inset-x-0 bg-black/50 text-white pt-2 pl-4 pb-5 text-lg"
              id="a-typography-paragraph-7"
            >
              《老年人膳食设计与烹饪技术规范》团体标准专家审定会在京召开
            </a-typography-paragraph>
            <a-flex :gap="8" class="absolute right-2 bottom-2" id="a-flex-8">
              <a-typography-link
                href="#"
                class="h-1.5 w-8 bg-[#e9e7e5]"
                v-for="index in nTopPages"
                :key="index"
                :class="{
                  '!bg-[#a41d1f]': index === currentTopPage,
                }"
                :id="`a-typography-link-9-${index}`"
              />
            </a-flex>
          </a-typography-link>
          <a-flex vertical :gap="22" class="flex-1" id="a-flex-10">
            <a-typography-link href="#" id="a-typography-link-11">
              <a-image src="https://picsum.photos/id/12/1000/800" :preview="false" class="aspect-[5/3]" id="a-image-12" />
            </a-typography-link>
            <a-typography-link href="#" id="a-typography-link-13">
              <a-image src="https://picsum.photos/id/13/1000/800" :preview="false" class="aspect-[5/3]" id="a-image-14" />
            </a-typography-link>
          </a-flex>
        </a-flex>
      </a-col>
      <a-col :span="7" class="!pr-0" id="a-col-15">
        <a-flex align="center" justify="space-between" id="a-flex-16">
          <a-typography-link href="#" class="bg-[#e60112] !text-white px-4 text-lg" id="a-typography-link-17">公告通知</a-typography-link>
          <a-typography-link href="#" class="text-sm !text-[#000]" id="a-typography-link-18">
            更多
            <PlusOutlined id="plusoutlined-19" />
          </a-typography-link>
        </a-flex>
        <a-divider class="my-0 border-4 border-[#ebebeb] -translate-y-0.5 relative -z-10" id="a-divider-20" />
        <a-flex vertical v-for="(item, index) in list" :key="index" :gap="6" class="mt-3" :id="`a-flex-21-${index}`">
          <a-typography-link href="#" class="!text-[#000] text-lg" :id="`a-typography-link-22-${index}`"> {{ item }} </a-typography-link>
          <a-typography-link href="#" class="!text-[#d9251e]" :id="`a-typography-link-23-${index}`">[详情]</a-typography-link>
          <a-divider class="my-2" :id="`a-divider-24-${index}`" />
        </a-flex>
        <a-list :split="false" :data-source="list1" id="a-list-25">
          <template #renderItem="{ item, index }">
            <a-list-item
              class="!px-0 !py-0 gap-x-4 mb-2"
              :class="{
                '!mb-0': index === list1.length - 1,
              }"
              :id="`a-list-item-26-${index}`"
            >
              <a-typography-link href="#" class="!text-[#000] flex-1 line-clamp-1" :id="`a-typography-link-27-${index}`">{{
                item.title
              }}</a-typography-link>
              <a-typography-text class="text-[#000]" :id="`a-typography-text-28-${index}`">{{ item.date }}</a-typography-text>
            </a-list-item>
          </template>
        </a-list>
      </a-col>
    </a-row>
    <a-row class="!mx-0" :gutter="20" id="a-row-29">
      <a-col :span="17" class="!pl-0" id="a-col-30">
        <a-flex align="center" justify="space-between" id="a-flex-31">
          <a-typography-link href="#" class="bg-[#e60112] !text-white py-1 px-4 text-lg font-bold" id="a-typography-link-32"
            >协会动态</a-typography-link
          >
          <a-typography-link href="#" class="text-sm !text-[#000]" id="a-typography-link-33">
            更多
            <PlusOutlined id="plusoutlined-34" />
          </a-typography-link>
        </a-flex>
        <a-typography-link href="#" class="line-clamp-1" id="a-typography-link-35">
          <a-typography-title :level="1" class="my-3 !text-[rgb(252,3,3)]" id="a-typography-title-36">
            习近平：民营经济发展前景广阔大有可为 民营企业
          </a-typography-title>
        </a-typography-link>
        <a-list :split="false" :data-source="list2" class="my-4" :grid="{ gutter: 25, column: 2 }" id="a-list-37">
          <template #renderItem="{ item, index }">
            <a-list-item
              class="!px-0 !py-0 !mb-1 !flex"
              :class="{
                '!mb-0': index === list1.length - 1,
              }"
              :id="`a-list-item-38-${index}`"
            >
              <a-badge color="#333" :id="`a-badge-39-${index}`" />
              <a-typography-link href="#" class="!text-[#000] flex-1 line-clamp-1 pr-2" :id="`a-typography-link-40-${index}`">{{
                item.title
              }}</a-typography-link>
              <a-typography-text class="text-[#000]" :id="`a-typography-text-41-${index}`">{{ item.date }}</a-typography-text>
            </a-list-item>
          </template>
        </a-list>
      </a-col>
      <a-col :span="7" class="!pr-0" id="a-col-42">
        <a-flex align="center" justify="space-between" id="a-flex-43">
          <a-flex :gap="25" id="a-flex-44">
            <a-typography-link
              href="#"
              class="text-xl py-1 !text-[#000] relative"
              v-for="(item, index) in list3"
              :key="index"
              :id="`a-typography-link-45-${index}`"
            >
              {{ item }}
              <a-divider class="border-4 border-[#d9251e] absolute -bottom-0.5 my-0" v-if="index === 0" :id="`a-divider-46-${index}`" />
            </a-typography-link>
          </a-flex>
          <a-typography-link href="#" class="text-sm !text-[#000]" id="a-typography-link-47">
            更多
            <PlusOutlined id="plusoutlined-48" />
          </a-typography-link>
        </a-flex>
        <a-divider class="my-0 border-4 border-[#ebebeb] -translate-y-0.5 relative -z-10" id="a-divider-49" />
        <a-list :split="false" :data-source="list4" class="my-4" id="a-list-50">
          <template #renderItem="{ item, index }">
            <a-list-item
              class="!px-0 !py-0 !mb-1 !flex"
              :class="{
                '!mb-0': index === list1.length - 1,
              }"
              :id="`a-list-item-51-${index}`"
            >
              <a-typography-link href="#" class="!text-[#000] flex-1 line-clamp-1 pr-2" :id="`a-typography-link-52-${index}`">{{
                item.title
              }}</a-typography-link>
              <a-typography-text class="text-[#000]" :id="`a-typography-text-53-${index}`">{{ item.date }}</a-typography-text>
            </a-list-item>
          </template>
        </a-list>
      </a-col>
    </a-row>
    <a-typography-link href="#" class="flex flex-col" id="a-typography-link-54">
      <a-image src="https://picsum.photos/id/30/1000/800" :preview="false" class="aspect-[11/1]" id="a-image-55" />
    </a-typography-link>
    <a-row class="!mx-0 mt-5" :gutter="20" id="a-row-56">
      <a-col :span="17" class="grid grid-cols-2 gap-x-5 gap-y-1 !pl-0" id="a-col-57">
        <a-flex vertical v-for="(item, index) in list5" :key="index" :id="`a-flex-58-${index}`">
          <a-flex align="center" justify="space-between" :id="`a-flex-59-${index}`">
            <a-flex :gap="25" :id="`a-flex-60-${index}`">
              <a-typography-link href="#" class="text-xl py-1 !text-[#000] relative" :id="`a-typography-link-61-${index}`">
                {{ item.title }}
                <a-divider class="border-4 border-[#d9251e] absolute -bottom-0.5 my-0" :id="`a-divider-62-${index}`" />
              </a-typography-link>
            </a-flex>
            <a-typography-link href="#" class="text-sm !text-[#000]" :id="`a-typography-link-63-${index}`">
              更多
              <PlusOutlined :id="`plusoutlined-64-${index}`" />
            </a-typography-link>
          </a-flex>
          <a-divider class="my-0 border-4 border-[#ebebeb] -translate-y-0.5 relative -z-10" :id="`a-divider-65-${index}`" />
          <a-typography-link href="#" class="flex flex-col relative mt-5" :id="`a-typography-link-66-${index}`">
            <a-image :src="item.img" :preview="false" class="aspect-[2/1]" :id="`a-image-67-${index}`" />
            <a-typography-paragraph
              class="!mb-0 bg-black/40 !text-white text-center absolute bottom-0 inset-x-0 line-clamp-1 text-lg py-1 px-4"
              :id="`a-typography-paragraph-68-${index}`"
              >{{ item.subTitle }}</a-typography-paragraph
            >
          </a-typography-link>
          <a-list :split="false" :data-source="item.list" class="mt-4" :id="`a-list-69-${index}`">
            <template #renderItem="{ item: item1, index: index1 }">
              <a-list-item
                class="!px-0 !py-0 !mb-1 !flex"
                :class="{
                  '!mb-0': index1 === item.list.length - 1,
                }"
                :id="`a-list-item-70-${index}-${index1}`"
              >
                <a-badge color="#e5e5e5" :id="`a-badge-71-${index}-${index1}`" />
                <a-typography-link href="#" class="!text-[#000] flex-1 line-clamp-1 pr-2" :id="`a-typography-link-72-${index}-${index1}`">{{
                  item1
                }}</a-typography-link>
              </a-list-item>
            </template>
          </a-list>
        </a-flex>
      </a-col>
      <a-col :span="7" class="!pr-0" id="a-col-73">
        <a-flex vertical :gap="18" id="a-flex-74">
          <a-typography-link
            href="#"
            v-for="(item, index) in list6"
            :key="index"
            class="flex flex-col"
            :id="`a-typography-link-75-${index}`"
          >
            <a-image :src="item" :preview="false" class="aspect-[13/3]" :id="`a-image-76-${index}`" />
          </a-typography-link>
        </a-flex>
        <a-flex align="center" justify="space-between" class="mt-4" id="a-flex-77">
          <a-flex :gap="25" id="a-flex-78">
            <a-typography-link href="#" class="text-xl py-1 !text-[#000] relative" id="a-typography-link-79">
              协会出版物
              <a-divider class="border-4 border-[#d9251e] absolute -bottom-0.5 my-0" id="a-divider-80" />
            </a-typography-link>
          </a-flex>
          <a-typography-link href="#" class="text-sm !text-[#000]" id="a-typography-link-81">
            更多
            <PlusOutlined id="plusoutlined-82" />
          </a-typography-link>
        </a-flex>
        <a-divider class="!my-0 border-4 border-[#ebebeb] -translate-y-0.5 relative -z-10" id="a-divider-83" />
        <a-flex :gap="20" class="my-4" id="a-flex-84">
          <a-typography-link
            href="#"
            v-for="(item, index) in list7"
            :key="index"
            class="flex flex-col"
            :id="`a-typography-link-85-${index}`"
          >
            <a-image
              :src="item.img"
              :preview="false"
              class="border border-solid border-[#e5e5e5] aspect-[4/5]"
              :id="`a-image-86-${index}`"
            />
            <a-typography-title :level="5" class="text-center !my-2" :id="`a-typography-title-87-${index}`">{{
              item.title
            }}</a-typography-title>
          </a-typography-link>
        </a-flex>
        <a-flex :gap="8" justify="center" id="a-flex-88">
          <a-typography-link
            href="#"
            class="h-1.5 w-8 bg-[#e9e7e5]"
            v-for="index in nTopPages1"
            :key="index"
            :class="{
              '!bg-[#a41d1f]': index === currentTopPage1,
            }"
            :id="`a-typography-link-89-${index}`"
          />
        </a-flex>
      </a-col>
    </a-row>
    <a-flex :gap="50" class="mt-4" id="a-flex-90">
      <a-typography-link href="#" class="flex flex-col border border-solid border-[#eee]" id="a-typography-link-91">
        <a-image src="https://picsum.photos/id/30/1000/800" :preview="false" class="aspect-[6/1]" id="a-image-92" />
      </a-typography-link>
      <a-typography-link href="#" class="flex flex-col border border-solid border-[#eee]" id="a-typography-link-93">
        <a-image src="https://picsum.photos/id/31/1000/800" :preview="false" class="aspect-[6/1]" id="a-image-94" />
      </a-typography-link>
    </a-flex>
    <a-typography-link href="#" class="flex flex-col border border-solid border-[#eee] mt-4" id="a-typography-link-95">
      <a-image src="https://picsum.photos/id/32/1000/800" :preview="false" class="aspect-[20/1]" id="a-image-96" />
    </a-typography-link>
  </div>
</template>

<script setup>
  const nTopPages = 8;
  const currentTopPage = 1;
  const nTopPages1 = 2;
  const currentTopPage1 = 1;
  const list = ['欢迎订阅《餐饮产业蓝皮书》（2024版）', '欢迎订阅《中国餐饮年鉴》（2023年版）'];
  const list1 = [
    {
      title: '关于开展2024年度中国餐饮企业经营情况调研的通知',
      date: '03-03',
    },
    {
      title: '关于2025年度中国新时代青年先锋拟推荐人选的公示',
      date: '02-25',
    },
    {
      title: '关于开展2024火锅产业好案例征集活动的通知',
      date: '02-21',
    },
    {
      title: '关于开展2024烧烤产业好案例征集活动的通知',
      date: '02-21',
    },
  ];
  const list2 = [
    {
      title: '《老年人膳食设计与烹饪技术规范》团体标准专家审定会在京召开',
      date: '02-28',
    },
    {
      title: '中国烹饪协会组织召开餐饮业民营企业家座谈会',
      date: '02-27',
    },
    {
      title: '我会召开食品安全研究组年度工作会议',
      date: '02-27',
    },
    {
      title: '中国气象局华风集团总经理率队到访中国烹饪协会',
      date: '02-21',
    },
    {
      title: '央视总台卫传公司党委书记一行到访中国烹饪协会',
      date: '02-14',
    },
    {
      title: '2025全国餐饮行业省级协会会长工作会议在京召开',
      date: '02-10',
    },
    {
      title: '中国烹饪协会在京举办中国烹饪大师新春团拜会',
      date: '02-09',
    },
    {
      title: '中国烹饪协会开展蛇年春节假期餐饮企业经营情况调研',
      date: '02-04',
    },
    {
      title: '2025年“跟着电影品美食”活动全国启动仪式在京举行',
      date: '01-22',
    },
    {
      title: '《中国企业家》杂志社社长钟云华一行到访中国烹饪协会',
      date: '01-22',
    },
    {
      title: '《老年人膳食设计与烹饪技术规范》团体标准专家审定会在京召开',
      date: '02-28',
    },
    {
      title: '中国烹饪协会组织召开餐饮业民营企业家座谈会',
      date: '02-27',
    },
    {
      title: '我会召开食品安全研究组年度工作会议',
      date: '02-27',
    },
    {
      title: '中国气象局华风集团总经理率队到访中国烹饪协会',
      date: '02-21',
    },
    {
      title: '用好国家惠企政策 助力餐饮业高质量发展——2024年餐饮业政策汇总',
      date: '01-02',
    },
    {
      title: '市场监管总局 教育部 民政部 国家卫生健康委 国管局关于强化集中用餐单位食堂承包经营食品安全管理工作的通知',
      date: '08-09',
    },
  ];
  const list3 = ['政策法规', '数据分析', '餐事辣评'];
  const list4 = [
    {
      title: '看两个《清单》→了解12种首违不罚和轻微免罚行为有哪些（附一图读懂）',
      date: '02-08',
    },
    {
      title: '新版《食品安全国家标准 食品添加剂使用标准》（GB2760-2024）今起实施',
      date: '02-08',
    },
    {
      title: '以完善食品安全责任体系推进加强校园食品安全工作——《关于进一步加强校园食品安全工作的通知》解读',
      date: '01-17',
    },
    {
      title: '一图读懂 | 《关于进一步加强校园食品安全工作的通知》',
      date: '01-17',
    },
    {
      title: '用好国家惠企政策 助力餐饮业高质量发展——2024年餐饮业政策汇总',
      date: '01-02',
    },
    {
      title: '市场监管总局 教育部 民政部 国家卫生健康委 国管局关于强化集中用餐单位食堂承包经营食品安全管理工作的通知',
      date: '08-09',
    },
    {
      title: '国务院关于促进服务消费高质量发展的意见',
      date: '08-06',
    },
    {
      title: '用好国家惠企政策 助力餐饮业高质量发展——2024年上半年餐饮业政策汇总',
      date: '07-08',
    },
    {
      title: '五部门发文培育餐饮消费新场景',
      date: '06-25',
    },
    {
      title: '市场监管总局等八部门：推行开办餐饮店“一体办”',
      date: '05-31',
    },
  ];
  const list5 = [
    {
      title: '行业资讯',
      img: 'https://picsum.photos/id/31/1000/800',
      subTitle: '春节，申遗成功！',
      list: [
        '从业35年，华人顶级金厨为何保持一周四刷《舌尖上的中国》？',
        '商务部公告2024年第60号 关于对进口牛肉进行保障措施立案调查的公告',
        '习近平对社会工作作出重要指示',
      ],
    },
    {
      title: '会员风采',
      img: 'https://picsum.photos/id/32/1000/800',
      subTitle: ' 汉堡王品牌方RBI集团全资控股汉堡王中国  承诺深化汉堡王中国业务增长 ',
      list: [
        ' 首批“中国消费名品”名单公示 兰州牛肉拉面成136个入选品牌中唯一面食品类',
        '讣告｜沉痛悼念烹饪泰斗张元松大师',
        '【“职”等你来——餐饮业服务招聘季】私享厨宴（杭州）',
      ],
    },
    {
      title: '技能竞赛',
      img: 'https://picsum.photos/id/33/1000/800',
      subTitle: '“白象杯”面食烹饪邀请赛（东部赛区）上海完赛',
      list: [
        '关于第九届全国烹饪技能竞赛组织委员会启用公章等事项的决定',
        '中国川菜·2024第八届四川（泸州）美食节暨四川泸州菜烹饪技能大赛在泸州举办',
        '杨柳会长出席“新时代 新鲁菜”2023创新职业技能竞赛决赛暨',
      ],
    },
    {
      title: '展会信息',
      img: 'https://picsum.photos/id/34/1000/800',
      subTitle: ' 2024中国厨师节博览会在宜宾盛大开幕 ',
      list: [
        ' 第四届中国（淮安）国际食品博览会开幕',
        '2021中国预制菜产业大会暨展会将于12月在福州举办',
        '弘扬面食文化 探索面食未来——2020中国面食博览会在兰',
      ],
    },
    {
      title: '培训教育',
      img: 'https://picsum.photos/id/35/1000/800',
      subTitle: '2024职业教育餐饮类课程思政集体备课活动在武汉成功举办',
      list: [
        '第176期全国餐饮业营养配餐师培训班开班通知',
        '第176期全国餐饮业厨政管理师培训班开班通知',
        '关于举办全国餐饮业职业经理人专题研修班的通知',
      ],
    },
    {
      title: '饮食文化',
      img: 'https://picsum.photos/id/36/1000/800',
      subTitle: '轻食不等于无肉无油——中国烹饪协会发布指南，从选材、烹饪等方面做出规范',
      list: ['饮食与健康-缺钙了吃什么？', '饮食与健康-这些水果会加重肠胃负担？', '饮食与健康-荠菜的药用价值您知道吗？'],
    },
  ];
  const list6 = [
    'https://picsum.photos/id/23/1000/800',
    'https://picsum.photos/id/24/1000/800',
    'https://picsum.photos/id/25/1000/800',
    'https://picsum.photos/id/26/1000/800',
    'https://picsum.photos/id/27/1000/800',
    'https://picsum.photos/id/28/1000/800',
    'https://picsum.photos/id/29/1000/800',
    'https://picsum.photos/id/30/1000/800',
  ];
  const list7 = [
    {
      img: 'https://picsum.photos/id/40/1000/800',
      title: '中国餐饮',
    },
    {
      img: 'https://picsum.photos/id/41/1000/800',
      title: '中国烹饪',
    },
  ];
</script>
<style></style>
